<template>
    <div style="background-color: #fff; border-radius: 0.15rem 0.15rem 0 0">
        <div class="navBox">
            <div class="nav" :class="{'active': active == 0}" @click="jump(0)">
                昨日排名
            </div>
            <span class="line">
                
            </span>
            <div class="nav" :class="{'active': active == 1}" @click="jump(1)">
                今日排名
            </div>
            <span class="line">
                
            </span>
            <div class="nav" :class="{'active': active == 2}" @click="jump(2)">
                月排名
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'headNav',
    data() {
        return {
            active: 1
        }
    },
    mounted () {
        this.$emit('getRank', this.active)
    },
    methods:{
        jump (num) {
            this.active = num
            this.$emit('getRank', this.active)
        }
    }
}
</script>
<style lang='less' scoped>
    .navBox{
        border-bottom: 0.01rem solid #DFDFDF;
        text-align: center;
        .nav{
            position: relative;
            display: inline-block;
            height: 0.9rem;
            line-height: 0.9rem;
            color: #999;
            font-size: 0.32rem;
            text-align: center;
            width: 31%;
        }
        .active{
            color: #128FEF;
            font-weight: bold;
        }
        .active::after{
            position: absolute;
            z-index: 1;
            left: 34%;
            bottom: 0;
            display: inline-block;
            height: 0.06rem;
            width: 0.64rem;
            background-color: #128FEF;
            border-radius: 0.03rem;
            content: "";
        }
        .line{
            display: inline-block;
            background: #ccc;
            border-radius: 0.01rem;
            width: 0.02rem;
            height: 0.5rem;
            padding: 0;
            position: relative;
            top: 0.18rem;
        }
    }

</style>